/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */


.form-container {
    @include clearfix();
    max-width: 100%;
    padding: 0;
    margin: 15px 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    label {
        color: $medium-prim-color;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="checkbox"],
    textarea {
        width: 100%;
        padding: 12px 20px;
        margin: 5px 0;
    }

    textarea {
        padding: 15px 20px;
        resize: none;
    }

    .row {
        @include clearfix();
        display: block;
        width: 100%;
        margin: 15px 0;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }

        label,
        input {
            display: block;
        }

        input {
            float: none;
        }

        input,
        textarea,
        .drop-down-container,
        .chosen-container {
            margin-top: 10px;
        }


        // Checkbox Content
        // ----------------------------------------

        // ## Todo: Update markup and require a block level container
        // to split checkboxes and labels into groups and rows

        .checkbox-container.one-line { // refactor out .one-line after markup change

            input[type="checkbox"],
            label {
                display: inline-block;
                width: auto;
            }

            input[type='checkbox'] {
                margin-right: 5px;
            }

        }


        // Inline Content
        // ----------------------------------------

        .inline-content {

            > label {
                float: left;
                display: inline-block;
                margin-top: 14px;
                margin-right: 8px;
                margin-left: 8px;
            }

            > input {
                float: left;
            }

            &.inline-content-padded {
                padding: 18px 0 0;
            }
        }

        input[type="radio"] {
            float: left;
            margin: 1px 5px 0 0;
        }

        // Layout Options
        // ----------------------------------------

        &.no-padding {
            margin-top: 0;
        }

        [class$="-column"] {
            display: inline-block;
        }

        .small-column {
            width: 25%;
            padding-right: 10px;
        }

        .medium-column {
            width: 40%;

            > .inline-content > label {
                width: 50%;
            }
        }
    }

    .button-container {
        padding: 10px 0;

        a {
            padding: 10px 20px;
        }

        &.float-opposite {
            a:first-child {
                float: left;
            }
            a:last-child {
                float: right;
            }
        }
    }

    &.tiny-form {
        max-width: 150px;
    }

    &.smaller-form {
        max-width: 280px;
    }

    &.small-form {
        max-width: 500px;
    }

    &.medium-form {
        max-width: 800px;
    }

    &.large-form {
        max-width: 1000px;
    }

    &.compact {
        margin: 0;
    }

    > .drop-down-container {
        width: 100%;
    }
}

.progress, .pw-strength {
    border-color: lightgray !important;
    height: 8px !important;
    margin-top: 10px !important;
}